<script setup>
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';

const exportToExcel = (tableData) => {
  document.location.href = "http://localhost:8080/indent/download";
};
const orderType = ref("堂食");
// 筛选表单
const filterForm = reactive({
  orderNumber: '',
  storeName: '', // 绑定到下拉框的选中值
  orderStatus: '', // 绑定到下拉框的选中值
  orderType: orderType.value,
  orderTime: '',
  endTime: ''
});

// 分页信息
const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 100
});

// 表格数据
const tableData = ref([]);

// 下拉框数据
const OrderStatus111 = ref([]);
const StoreName111 = ref([]);

// 获取数据
const fetchData = () => {
  axios.get(`/indent/allReceipt/${orderType.value}/${pagination.pageNum}/${pagination.pageSize}`).then((res) => {
    tableData.value = res.data.data;
    pagination.total = res.data.total;
  });
};
// 获取下拉框数据
const feData1 = () => {
  axios.get("/indent/allOrderStatus").then((res) => {
    OrderStatus111.value = res.data; // 假设后端返回的是数组格式
  });
};
const feData2 = () => {
  axios.get("/indent/allStoreName").then((res) => {
    StoreName111.value = res.data; // 假设后端返回的是数组格式
  });
};
onMounted(() => {
  fetchData();
  feData1();
  feData2();
});
// 搜索
const handleQuery = () => {
  pagination.pageNum = 1;
  pagination.pageSize = 10;
  fetchDataWithFilter();
};
// 分页大小改变
const handleSizeChange = (val) => {
  pagination.pageSize = val;
};
// 当前页改变
const handleCurrentChange = (val) => {
  pagination.pageNum = val;
};
// 获取筛选数据
const fetchDataWithFilter = () => {
  const params = {
    orderNumber: filterForm.orderNumber,
    storeName: filterForm.storeName,
    orderStatus: filterForm.orderStatus,
    orderType: filterForm.orderType,
    orderTime: filterForm.orderTime,
    endTime: filterForm.endTime,
    pageNum: pagination.pageNum,
    pageSize: pagination.pageSize
  };
  axios.post(`/indent/select/${pagination.pageNum}/${pagination.pageSize}`, params).then((res) => {
    tableData.value = res.data.data;
    pagination.total = res.data.total;
  });
};

// 弹窗内容
const dialogVisible = ref(false);
const orderDetails = ref({
  receipt: [],
  dishes: []
});

const showDialog = (index, row) => {
  axios.get(`/indent/${row.id}`).then((res) => {
    orderDetails.value = res.data;
  });
  dialogVisible.value = true;
};
</script>

<template>
  <div class="dine-in-order-container">
    <div class="header">
      <h1>堂食订单</h1>
    </div>
    <div class="filter-container">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="订单编号">
          <el-input v-model="filterForm.orderNumber" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="请选择门店">
          <el-select v-model="filterForm.storeName" placeholder="请选择">
            <el-option
                v-for="status in StoreName111"
                :key="status"
                :label="status"
                :value="status">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择订单状态">
          <el-select v-model="filterForm.orderStatus"  placeholder="请选择">
            <el-option
                v-for="status in OrderStatus111"
                :key="status"
                :label="status"
                :value="status">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
              v-model="filterForm.orderTime"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
          />
          <el-date-picker
              v-model="filterForm.endTime"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button type="primary" @click="fetchData">刷新</el-button>
        </el-form-item>
      </el-form>
    </div>
<!-- 表格-->
    <div>
      <el-button type="text" size="small" @click="exportToExcel">导出</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="订单id" width="180" />
        <el-table-column prop="orderNumber" label="订单编号" width="180" />
        <el-table-column prop="orderTime" label="下单时间" width="180" />
        <el-table-column prop="totalAmount" label="订单金额" width="120" />
        <el-table-column prop="storeName" label="所属门店" width="150" />
        <el-table-column prop="tableNumber" label="桌号" width="120" />
        <el-table-column prop="cashier" label="收银员" width="120" />
        <el-table-column prop="orderStatus" label="订单状态" width="120" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="text" size="small" @click="showDialog(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!--    分页-->
    <div class="block">
      <span class="demonstration">调整每页显示条数</span>
      <el-pagination
          :page-sizes="[1, 3, 5, 10, 15, 20, 50]"
          :total="pagination.total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next"
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize">
      </el-pagination>
    </div>
<!--    弹窗-->
    <el-dialog
        title="订单详情"
        v-model="dialogVisible"
        width="50%">
      <div>
        <h3>台桌信息</h3>
        <p>所属门店: {{ orderDetails.receipt.storeName }}</p>
        <p>桌号: {{ orderDetails.receipt.storeAddress }}</p>
        <p>就餐人数: {{ orderDetails.receipt.numberOfPeople }}人</p>
        <h3>菜品信息</h3>
        <el-table :data="orderDetails.dishes">
          <el-table-column prop="id" label="编号" width="50" />
          <el-table-column prop="name" label="菜品名称" />
          <el-table-column prop="price" label="原价" />
          <el-table-column prop="currentPrice" label="现价" />
          <el-table-column prop="discount" label="折扣" />
        </el-table>
        <p>总额: ¥{{ orderDetails.receipt.totalAmount }}</p>
        <h3>订单信息</h3>
        <p>订单编号: {{ orderDetails.receipt.orderNumber }}</p>
        <p>订单状态: {{ orderDetails.receipt.orderStatus }}</p>
        <p>订单金额: ¥{{ orderDetails.receipt.totalAmount }}</p>
        <p>订单实付金额: ¥{{ orderDetails.receipt.actualAmount }}</p>
        <p>下单时间: {{ orderDetails.receipt.orderTime }}</p>
        <p>支付方式: {{ orderDetails.receipt.paymentMethod }}</p>
        <p>支付时间: {{ orderDetails.receipt.paymentTime }}</p>
        <p>收银员: {{ orderDetails.receipt.cashier }}</p>
        <p>备注: {{ orderDetails.receipt.remark }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style scoped>

.dine-in-order-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header {
  margin-bottom: 20px;
}

.header h1 {
  font-size: 20px;
  color: #333;
  margin: 0;
}

.filter-container {
  margin-bottom: 20px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
}

.table-container {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}
</style>